function _angularCompile(dom, $scope) {
    console.log($scope);
    var injector = angular.element($('[ng-app]')[0]).injector();
    var $compile = injector.get('$compile');
    var $rootScope = injector.get('$rootScope');
    return $compile(dom)($scope || $rootScope);
}

//check if local storage available
if(typeof (Storage) === 'undefined') {
    throw 'Local-Storage not available.'
    +'Please update your browser to the latest.';
}

//TODO put these into 'my-lib'
function get_local(name) {
    return JSON.parse(localStorage.getItem(name));
}

function set_local(name, value) {
    localStorage.setItem(name, JSON.stringify(value));
}


function get_local_g_value() {
    return {
        points:JSON.parse(localStorage.getItem('koi_g_points')),
        edges:JSON.parse(localStorage.getItem('koi_g_edges'))
    };
}

function put_local_g_value(g) {
    function cleanPoint(point){
        return {
            x:point.x,
            y:point.y,
            options:point.options
        }
    }

    function cleanEdge(edge){
        return {
            from:edge.from,
            to:edge.to,
            options:edge.options
        }
    }

    localStorage.setItem('koi_g_points', JSON.stringify(g.points.map(cleanPoint)));
    localStorage.setItem('koi_g_edges', JSON.stringify(g.edges.map(cleanEdge)));
    //console.log(localStorage);
}

/*debug*/ console.log('koi_g',get_local_g_value());

/**
 * The Desinger
 * @type {Designer}
 */

var canvasId =  'designer_canvas';
var KOI = new Koi($('#' + canvasId), get_local_g_value());

var Designer = new Designer(KOI);

/**
 * begin of angular context
 * @type {module}
 */
var app = angular.module('app', []);
app.controller('main', function ($scope) {
    Designer.init($scope);


    $scope.koi_points = KOI.g.points;
    $scope.koi_edges = KOI.g.edges;

    //$scope.Designer = Designer;

    $scope.g_title = 'KOI EDITOR (BETA)';

    $scope.current = KOI.current;

    //activity input param
    $scope.param = {};
    //global input property
    $scope._prop = {};

    $scope.prop = function () {
        KOI.prop($scope._prop.key, $scope._prop.val);
    };

    $scope.getCurrentType = function() {
        var t = KOI.current?  KOI.current.options.type:null;
        if(t == 's') return 'synchronizer';
        else if(t == 'a') return 'activity';
        else return 'unknown';
    };

    $scope.currentIsActivity = function() {
        return $scope.getCurrentType() == 'activity';
    };

    $scope.currentIsSynchronizer = function() {
        return $scope.getCurrentType() == 'synchronizer';
    };

    $scope.param = function () {
        $scope.current.act_params[$scope.param.key] = $scope.param.val;
    };

    $scope.$watch('koi_points',function(){
        console.log('caught points change');
        put_local_g_value(KOI.g);
    },true);

    $scope.$watch('koi_edges',function(){
        console.log('caught edges change');
        put_local_g_value(KOI.g);
    },true);

    $scope.reset = function() {
        KOI.g.clear();
        KOI.g.render();
    };

    //$scope.$watch('current',function(){
    //
    //});

    //setInterval(function () {
    //    $scope.editor.clear().render();
    //}, 200);

});

